<template>
  <div id="todo-list">
    <form v-on:submit.prevent="addNewTodo">
      <label>add new todo</label>
      <input v-model="newTodoText"
             id="new-tdo"
             placeholder="eg.free the cat" />
      <button>add</button>
    </form>
    <ul>
      <todo-item v-for="(todo, index) in todos"
                 v-bind:key="todo.id"
                 v-bind:todo="todo"
                 v-on:remove="todos.splice(index)">
      </todo-item>
    </ul>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import BaseListItemRender from "./BaseListItemRender";
export default defineComponent({
  name: 'BaseListRender',
  components: {
    TodoItem: BaseListItemRender
  },
  data () {
    return {
      todos: [
        {
          id: 1,
          title: 'Do the dishes'
        },
        {
          id: 2,
          title: 'Take out the trash'
        },
        {
          id: 3,
          title: 'Mow the lawn'
        }
      ],
      newTodoText: '',
      nextTodoId: 4
    }
  },
  methods: {
    addNewTodo () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      });
    }
  }
})
</script>